<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=8" />
	<title>Micropolis</title>
	<link rel="stylesheet" type="text/css" href="css/theme/jquery-ui-1.8.5.custom.css">
	<script type="text/javascript" src="js/jquery/jquery-1.4.2.min.js"></script>
	<script type="text/javascript" src="js/jquery/jquery-ui-1.8.5.custom.min.js"></script>
	<script type="text/javascript" src="js/json/json2.js"></script>
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<script type="text/javascript" src="js/color.js"></script>
	<script type="text/javascript" src="js/rules.js"></script>
	<script type="text/javascript" src="js/main.js"></script>
	<script type="text/javascript" src="js/canvas.js"></script>
	<script type="text/javascript" src="js/map.js"></script>
	<script type="text/javascript" src="js/simulation.js"></script>
	<script type="text/javascript" src="js/ui.js"></script>
	<script type="text/javascript" src="js/dialogs.js"></script>
	<script type="text/javascript" src="js/util.js"></script>
	<script type="text/javascript" src="js/tile.js"></script>
	<script type="text/javascript" src="js/zone.js"></script>
	<script type="text/javascript" src="js/data.js"></script>
	<script type="text/javascript" src="js/config.js"></script>
</head>
<body oncontextmenu="return false;">

<!-- Main UI -->
<div id="cityName" class="ui-widget-header frame-title">City View</div>
<div id="bodyWrap">
	<div id="canvasContent">
		<canvas id="canvas" width="640" height="480">
			<p id="noCanvasMessage">This application requires a browser that supports HTML 5. Please try Google Chrome, Fire Fox or IE 9.</p>
		</canvas>
		<div id="priceOverlay" style="display: none;" class="ui-widget ui-widget-content"></div>
	</div>
	<div id="interfaceFrame">
		<canvas id="mapCanvas" width="128" height="128">
			<p id="noCanvasMessage">This application requires a browser that supports HTML 5. Please try Google Chrome, Fire Fox or IE 9.</p>
		</canvas>
		<div id="toolboxWindow">
			<div id="zoomTitle" class="center">Zoom: 1x</div>
			<div id="zoomSlider" style="margin: 4px 8px;"></div>
			<table class="toolbox-table">
				<tr>
					<td rowspan="2"><div class="toolbox-icon icon-size5" id="toolboxResidential"></div></td>
					<td rowspan="2"><div class="toolbox-icon icon-size5" id="toolboxCommercial"></div></td>
					<td rowspan="2"><div class="toolbox-icon icon-size5" id="toolboxIndustrial"></div></td>
					<td colspan="2"><div class="toolbox-icon icon-size2" id="toolboxRoad"></div></td>
				</tr>
				<tr>
					<td colspan="2"><div class="toolbox-icon icon-size2" id="toolboxRail"></div></td>
				</tr>
				<tr>
					<td><div class="toolbox-icon icon-size1" id="toolboxBulldozer"></div></td>
					<td><div class="toolbox-icon icon-size1" id="toolboxPark"></div></td>
					<td><div class="toolbox-icon icon-size1" id="toolboxPolice"></div></td>
					<td><div class="toolbox-icon icon-size1" id="toolboxFire"></div></td>
					<td><div class="toolbox-icon icon-size1" id="toolboxLine"></div></td>
				</tr>
			</table>
			<table class="toolbox-table">
				<tr>
					<td rowspan="2"><div class="toolbox-icon icon-size4" id="toolboxAirport"></div></td>
					<td><div class="toolbox-icon icon-size3" id="toolboxSeaport"></div></td>
					<td><div class="toolbox-icon icon-size3" id="toolboxStadium"></div></td>
				</tr>
				<tr>
					<td><div class="toolbox-icon icon-size3" id="toolboxCoal"></div></td>
					<td><div class="toolbox-icon icon-size3" id="toolboxNuclear"></div></td>
				</tr>
			</table>
			<div id="saveButton">Save Game</div>
			<button onclick="window.localStorage.removeItem('save');">Delete</button>
			<div id="debug"></div>
		</div>
	</div>
</div>

<!-- Message Box Dialog -->
<div id="messageBox" style="display: none;"></div>

<!-- Generate New Map Dialog -->
<div id="generateNewMap" style="display: none;">
	<p>
		First we need to generate a map of the land that your new city will
		occupy. Use the sliders below to adjust how forested your land will
		be, how many lakes it will have and how complex the river is. Then
		use the Generate button to see the outcome.
	</p>
	<table width="100%">
		<tr>
			<td>Forest</td>
			<td width="50%"><div id="forestSlider"></div></td>
		</tr>
		<tr>
			<td>Lakes</td>
			<td><div id="lakesSlider"></div></td>
		</tr>
		<tr>
			<td>River</td>
			<td><div id="riverSlider"></div></td>
		</tr>
	</table>
</div>

<!-- Image Pre-Loads -->
<img id="tileset1x" src="img/tilesetQuarter.png" alt="Tile Set 1/4x Zoom" style="display: none;">
<img id="tileset2x" src="img/tilesetHalf.png" alt="Tile Set 1/2x Zoom" style="display: none;">
<img id="tileset3x" src="img/tileset1x.png" alt="Tile Set 1x Zoom" style="display: none;">
<img id="tileset4x" src="img/tileset2x.png" alt="Tile Set 2x Zoom" style="display: none;">
<img id="tileset5x" src="img/tileset4x.png" alt="Tile Set 4x Zoom" style="display: none;">

</body>
</html>
